<template>
  <el-popover :visible="visiable" placement="left-start" width="240">
    <template #reference>
      <span class="txt-update" @click="visiable = true">{{ num }}</span>
    </template>
    <!-- 修改按钮 -->
    <UpdateBasicCard @closed="visiable = false">
      <template #header>
        <div>小张力机</div>
        <div class="text-[12px] text-[#cccccc] -mt-1">一般位于牵引场</div>
      </template>
      <template #main>
        <slot />
      </template>
    </UpdateBasicCard>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UpdateBasicCard from './UpdateBasicCard.vue'

const { num } = defineProps({ num: { type: Number, default: 2 } })
const visiable = ref(false)
</script>

<style scoped lang="scss">
.txt-update {
  @apply text-[#D43030] cursor-pointer border-b border-[#D43030];
}
</style>
